<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <div class="inventory">
        <div id="main" style="width: 100%; height: 500px"></div>
      </div>
      <div class="details">
        <h5
          style="
            font-size: 18px;
            font-weight: bold;
            margin-top: 5px;
            margin-bottom: 10px;
          "
        >
          订单管理
        </h5>
        <div class="list">
          <el-tag type="success" effect="plain" class="tag"
            ><span class="item"
              ><i class="el-icon-document-checked"></i>已完成</span
            ><span class="item bold">{{
              statusCounts["已完成"] ? statusCounts["已完成"] : "3"
            }}</span></el-tag
          >
          <el-tag type="danger" effect="plain" class="tag"
            ><span class="item"
              ><i class="el-icon-document-remove"></i>已取消</span
            ><span class="item bold">{{
              statusCounts["已取消"] ? statusCounts["已取消"] : "2"
            }}</span></el-tag
          >
          <el-tag type="info" effect="plain" class="tag"
            ><span class="item"><i class="el-icon-document-add"></i>审批中</span
            ><span class="item bold">{{
              statusCounts["审批中"] ? statusCounts["审批中"] : "2"
            }}</span></el-tag
          >
          <el-tag effect="plain" class="tag"
            ><span class="item"
              ><i class="el-icon-document-checked"></i>已批准</span
            ><span class="item bold">{{
              statusCounts["已批准"] ? statusCounts["已批准"] : "1"
            }}</span></el-tag
          >
          <el-tag type="warning" effect="plain" class="tag"
            ><span class="item"><i class="el-icon-loading"></i>采购中</span
            ><span class="item bold">{{
              statusCounts["采购中"] ? statusCounts["采购中"] : "1"
            }}</span></el-tag
          >
        </div>
      </div>
    </div>
    <br />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import * as echarts from "echarts";
import { getInventory } from "@/api/inventory";
import { getOrdersAll } from "@/api/order";
export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  created() {
    // 初始化结束后 已经有token 调用的是action中的方法
    this.$store.dispatch("user/getUserInfo");
    this.getOrders();
  },
  mounted() {
    this.getInventory();
    this.getOrders();
  },
  data() {
    return {
      titleData: [],
      valueData: [],
      statusCounts: {},
    };
  },
  methods: {
    initECharts() {
      var myChart = echarts.init(document.getElementById("main"));
      myChart.setOption({
        title: {
          text: "库存管理",
        },
        tooltip: {},
        xAxis: {
          data: this.titleData,
        },
        yAxis: {},
        series: [
          {
            name: "库存量",
            type: "bar",
            data: this.valueData,
          },
        ],
      });
      this.myChart = myChart; // 保存图表实例，以便在beforeDestroy中销毁
    },
    // 获取库存
    async getInventory() {
      await getInventory().then((res) => {
        res.forEach((element) => {
          this.titleData.push(element.productName);
          this.valueData.push(element.stock);
          this.initECharts();
        });
      });
    },
    // 获取订单
    async getOrders() {
      await getOrdersAll().then((res) => {
        res.forEach((item) => {
          const status = item.status;
          if (this.statusCounts[status]) {
            this.statusCounts[status]++;
          } else {
            this.statusCounts[status] = 1;
          }
          // console.log(this.statusCounts);
        });
      });
      this.saveOrderLists();
    },
    saveOrderLists() {
      localStorage.setItem("orders", JSON.stringify(this.statusCounts));
    },
    loadOrdersFromLocalStorage() {
      const savedOrders = JSON.parse(localStorage.getItem("orders"));
      if (savedOrders) {
        this.statusCounts = savedOrders;
      }
    },
  },
};
createAiChat({
       appId:"1927273949209673729",
       // 支持top-left左上, top-right右上, bottom-left左下, bottom-right右下
       iconPosition:"bottom-right"
    })
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.inventory {
  // display: flex;
  // flex-direction: column;
  // justify-content: center;
  // align-content: center;
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(220, 220, 220, 0.43);
  background-color: rgba(246, 246, 246, 0.079);
  border-radius: 5px;
  margin-bottom: 40px;
}
.main {
  padding: 10px;
}
.details {
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(220, 220, 220, 0.43);
  background-color: rgba(246, 246, 246, 0.079);
  border-radius: 5px;
}
.list {
  display: flex;
  justify-content: space-around;
  margin-bottom: 12px;
  overflow: hidden;
  overflow-x: scroll;
}
.item {
  text-align: center;
  width: 100px;
}
i {
  margin-right: 10px;
  font-size: 20px;
}
.tag {
  height: 80px;
  width: 280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 17px;
  margin: 10px;
}
.bold {
  font-size: 25px;
  font-weight: bold;
  text-align: center;
}
</style>
